<template>
  <div class="app-container">
    <div class="filter-container" style="height: 4vw">
      <span>登录用户名</span>
      <!-- <span style="color: gray">{{ channels.username }}</span> -->
      <el-input
        v-model="channels.username"
        placeholder="用户名"
        style="width: 60%; margin-right: 20px"
        class="filter-item"
        disabled
      />
    </div>
    <div class="filter-container">
      <span>渠道名称</span>
      <el-input
        v-model="channels.name"
        placeholder="渠道名称"
        style="width: 60%; margin-right: 20px"
        class="filter-item"
      />
    </div>
    <div class="filter-container">
      <span>重置密码</span>
      <el-input
        v-model="channels.password"
        placeholder="重置密码"
        type="password"
        style="width: 60%; margin-right: 20px"
        class="filter-item"
      />
    </div>
    <div class="filter-container">
      <span>确认密码</span>
      <el-input
        v-model="channels.confirmPassword"
        placeholder="确认密码"
        type="password"
        style="width: 60%; margin-right: 20px"
        class="filter-item"
      />
    </div>

    <div class="filter-container">
      <span>上级渠道</span>
      <el-select
        v-model="channels.admin_id"
        placeholder="上级渠道"
        clearable
        class="filter-item"
        style="width: 60%; margin-right: 20px"
      >
        <el-option
          v-for="item in calendarTypeOptions"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
        />
      </el-select>
    </div>
    <el-button class="filter-item" type="primary" @click="confirm">
      确认
    </el-button>
  </div>
</template>

<script>
import { encryption2 } from '@/api/index'
export default {
  name: 'ComplexTable',
  data() {
    return {
      // 渠道
      channels: {
        name: '', // 渠道名称
        username: '', // 用户名字
        password: '', // 登录密码
        confirmPassword: '', // 确认密码
        admin_id: '', // 上级渠道
        id: ''
      },
      calendarTypeOptions: [{ id: '', nickname: '' }]
    }
  },
  created() {
    if (this.$route.params.Code) {
      // console.log(this.$route.params.Code);
      this.channels.id = this.$route.params.Code.id
      this.channels.username = this.$route.params.Code.username

      this.channels.name = this.$route.params.Code.nickname
      this.calendarTypeOptions[0].id = this.$route.params.Code.admin_id
      this.calendarTypeOptions[0].nickname = this.$route.params.Code.adminname

      this.channels.admin_id = this.$route.params.Code.admin_id
    }
    this.Channel()
  },
  methods: {
    Channel() {
      const arys = {}
      const url = '/market/singleList'
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          if (this.calendarTypeOptions.length > 1) {
            this.calendarTypeOptions = this.calendarTypeOptions.concat(
              res.data.result
            )
          } else {
            this.calendarTypeOptions = res.data.result
          }
          this.calendarTypeOptions = res.data.result
        } else {
          console.log(res)
        }
      })
    },
    confirm() {
      if (!this.channels.password) {
        return this.$message({
          message: '密码不能为空',
          type: 'error'
        })
      }
      if (this.channels.password != this.channels.confirmPassword) {
        return this.$message({
          message: '俩次密码输入不一致',
          type: 'error'
        })
      }
      const arys = {
        id: this.channels.id,
        nickname: this.channels.name,
        password: this.channels.password,
        adminId: this.channels.admin_id
      }
      const url = '/market/editMarketAdmin'
      encryption2(arys, url).then((res) => {
        if (res.data.status === 0) {
          this.$message({
            message: res.data.text,
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: res.data.text,
            type: 'error'
          })
        }
      })
    }
  }
}
</script>
<style scoped>
.filter-container {
  width: 1000px;
  display: flex;
  align-items: center;
}

.filter-container > span {
  width: 100px;
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>
